export default class RadarCapture{
	constructor(canvasId, max, axisCount=4) {
	    this.ctx = uni.createCanvasContext(canvasId)
		this.rate = this.getRate() / 2.8
		//轴数
		this.axisCount = axisCount
		this.max = max || 100
		this.splitPoints = []
		this.dataPoints = [0, 0, 0, 0, 0]
		this.width = 680
		this.height = 454
		this.radius = 150
		this.o = {x: 340, y: 227}
		this.init()
	}
	//初始化绘制分隔线以及指示器
	init(){
		this.getSplitPoints()
		this.renderSplitLine()
		this.renderLabel()
		this.ctx.draw(true)
	}
	getSplitPoints(){
		//添加五维分隔线
		for(let i=this.axisCount;i>0;i--){
			let r = i / this.axisCount * this.radius
			let arr = []
			//获取分隔线的五个顶点
			for(let j=0;j<5;j++){
				let pi = Math.PI
				let theta = (2 / 5 * j - 0.5) * pi 
				let x = Math.round(this.o.x + (r *  Math.cos(theta)))
				let y = Math.round(this.o.y + (r *  Math.sin(theta)))
				arr.push({x, y})
			}
			this.splitPoints.push(arr)
		}
	}
	renderSplitLine(){
		this.ctx.save()
		this.ctx.strokeStyle = '#2CA0FF'
		this.ctx.lineWidth = 2
		this.splitPoints.forEach(linePoints=>{
			this.ctx.beginPath()
			linePoints.forEach((p,index)=>{
				if(index === 0){
					this.ctx.moveTo(p.x * this.rate, p.y *  this.rate)
				}else{
					this.ctx.lineTo(p.x * this.rate, p.y *  this.rate)
				}
			})
			this.ctx.closePath()
			this.ctx.stroke()
		})
		this.ctx.restore()
	}
	//绘制指示器
	renderLabel(){
		let labelData = [
			{x: 270, y: 0,},
			{x: 492, y: 132,},
			{x: 391, y: 334,},
			{x: 132, y: 334,},
			{x: 60, y: 132,},
		]
		labelData.forEach((p, index) => {
			let src = `../../static/radar/radar${index + 1}.png`
			this.ctx.drawImage(src, p.x * this.rate, p.y * this.rate, 130 * this.rate, 70 * this.rate) 
		})
		
	}
	//绘制数据区域
	render(data){
		let arr = data
		this.getDataPoint(arr)
		this.renderArea()
		this.renderLabelScore(arr)
	}
	getDataPoint(arr){
		if(arr instanceof Array && arr.length === 5){
			this.dataPoints = arr.map((score, n) => {
				if(score === 0){
					score = 0.1
				}
				let r = score / this.max * this.radius
				r = r === 0 ? 1 : r
				let pi = Math.PI
				let theta = (2 / 5 * n - 0.5) * pi 
				let x = Math.round(this.o.x + (r *  Math.cos(theta)))
				let y = Math.round(this.o.y + (r *  Math.sin(theta)))
				return {x,y}
			})
		}
	}
	renderArea(){
		this.ctx.save()
		this.ctx.fillStyle = 'rgba(70,205,207,0.5)'
		this.ctx.beginPath()
		this.dataPoints.forEach((p, index)=>{
			if(index === 0){
				this.ctx.moveTo(p.x * this.rate, p.y * this.rate)
			}else{
				this.ctx.lineTo(p.x * this.rate, p.y * this.rate)
			}
		})
		this.ctx.closePath()
		this.ctx.fill()
		this.ctx.restore()
		this.ctx.fillStyle = 'rgba(70, 206, 207, 0.2)#46cdcf'
		this.dataPoints.forEach(p=>{
			this.ctx.beginPath()
			this.ctx.arc(p.x * this.rate, p.y * this.rate, 4 * this.rate, 0, 2 * Math.PI)
			this.ctx.fill()
		})
		this.ctx.draw(true)
	}
	renderLabelScore(scores){
		let scorePosition = [
			{x: 336, y: 18},
			{x: 591, y: 150},
			{x: 492, y: 352},
			{x: 160, y: 352},
			{x: 87, y: 150},
		]
		this.ctx.save()
		this.ctx.setFontSize(18 * this.rate)
		this.ctx.setTextAlign('center')
		this.ctx.strokeStyle = '#FFFFFF'
		scorePosition.forEach((p, i)=>{
			this.ctx.strokeText(scores[i], p.x * this.rate, p.y * this.rate, 56 * this.rate)
		})
		this.ctx.restore()
		this.ctx.draw(true)
	}
	//获取缩放比例
	getRate(){
		let info = uni.getSystemInfoSync()
		if(info.screenWidth > info.screenHeight){
			this.width = 607
			this.height = 405
			this.radius = this.radius * 607 / 750
			return 607 / 750
		}
		return info.windowWidth / 750
	}
}